<!DOCTYPE html>
<html>
<head>
	<title>globalCompositeOperation</title>
</head>
<body>

<div id="container">
	<!-- <input id="button" type="range" min="1" max="12"> -->
	<canvas id="canvas" width="800" height="500px" style="border: 1px solid #ccc">
		Your Browser does not support Canvas, please upgrade
	</canvas>
</div>

<script>
	(function(){

		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var button = document.getElementById("button");
			
		
		ctx.globalCompositeOperation = "lighter";

		ctx.fillStyle = "blue";
		ctx.fillRect(10, 10, 100, 100);

		ctx.fillStyle = "red";
		ctx.fillRect(50, 50, 100, 100);
		
	}());
</script>
</body>
</html>